import NextLink from 'next/link'
import Layout from 'lib/components/layout'
import { Code, Link, Text, Spacer, Note } from 'components'

export const meta = {
  title: 'Introduction',
  group: 'Getting Started',
  index: 5,
}

## Introduction

### About

**Geist UI** is an elegant and beautiful React component library with Geek style,
originating from <Link rel="nofollow" target="_blank" href="https://vercel.com">Vercel</Link> design system.

With Geist's unique advantages in text layout, optimization of light and dark lines, and scaleable components,
you can easily create clean and powerful personal sites, or quickly build modern web applications based on highly customizable design system.

Get start on Geist with the <NextLink href="/en-us/guide/installation"><Link color>guide documentation</Link></NextLink>,
or view <Link rel="nofollow" target="_blank" color href="https://github.com/geist-org/react/tree/master/examples">full project examples</Link>.

<Note label="" type="warning">
  <b>This is a COMMUNITY PROJECT, not associated with Vercel.</b>
</Note>

<Spacer h={2.5} />

### Contact

<ul>
  <li>
    <Link
      color
      target="_blank"
      rel="nofollow"
      href="https://github.com/geist-org/react/issues/new">
      Report an issue
    </Link>
  </li>
  <li>
    <Link
      color
      target="_blank"
      rel="nofollow"
      href="https://github.com/geist-org/react/discussions">
      Chat on GitHub Discussions
    </Link>
  </li>
  <li>We welcome feedback and ideas. We also love PRs.</li>
</ul>

<Spacer h={2.5} />

### License

Licensed under the [MIT LICENSE](https://github.com/geist-org/react/blob/master/LICENSE).

export default ({ children }) => <Layout meta={meta}>{children}</Layout>
